<!DOCTYPE html>
<html lang="zh-CN">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src='../webjars/jquery/3.3.1-1/jquery.min.js' type='text/javascript'></script>
    <script src="/js/echarts.js"></script>
    <script src="/js/echarts-gl.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:500px;"></div>
<div id="second" style="width: 1000px;height:500px;"></div>
<div id="fourth" style="width: 1000px;height:500px;"></div>
<div id="third" style="width: 1000px;height:500px;"></div>

<script type="text/javascript">

    var kline = [];
    var date = [];
    var stockCode = [];
    var totalValue = [];
    var sum = [];
    var pb = [];
    var hyDisperson = [];

    var myChart = echarts.init(document.getElementById('main'));
    var second = echarts.init(document.getElementById('second'));
    var third = echarts.init(document.getElementById('third'));
    var fourth = echarts.init(document.getElementById('fourth'));

    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '大宗交易'
        },
        tooltip: {},
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data:['日期']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，也控制x轴。
                type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            }
        ],
        markLine : {
            symbol:"none",               //去掉警戒线最后面的箭头
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线"
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"rgba(238, 99, 99)"
                },
                name: '警戒线',
                yAxis: 0.5
            }]
        },

        series: [{
            name: '大宗交易',
            type: 'bar',
            data: []
        }]
    });

    // 显示标题，图例和空的坐标轴
    second.setOption({
        title: {
            text: '高管增减持'
        },
        tooltip: {},
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data:['日期']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，也控制x轴。
                type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            }
        ],
        markLine : {
            symbol:"none",               //去掉警戒线最后面的箭头
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线"
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"rgba(238, 99, 99)"
                },
                name: '警戒线',
                yAxis: 0.5
            }]
        },

        series: [{
            name: '高管增减持',
            type: 'bar',
            data: []
        }]
    });

    // 显示标题，图例和空的坐标轴
    third.setOption({
        title: {
            text: '市净率'
        },
        tooltip: {},
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data:['日期']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，也控制x轴。
                type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            }
        ],
        markLine : {
            symbol:"none",               //去掉警戒线最后面的箭头
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线"
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"rgba(238, 99, 99)"
                },
                name: '警戒线',
                yAxis: 0.5
            }]
        },

        series: [{
            name: '市净率',
            type: 'bar',
            data: []
        }]
    });

    // 显示标题，图例和空的坐标轴
    fourth.setOption({
        title: {
            text: '市净率行业分散度'
        },
        tooltip: {},
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data:['日期']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，也控制x轴。
                type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            }
        ],
        markLine : {
            symbol:"none",               //去掉警戒线最后面的箭头
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线"
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"rgba(238, 99, 99)"
                },
                name: '警戒线',
                yAxis: 0.5
            }]
        },

        series: [{
            name: '市净率行业分散度',
            type: 'bar',
            data: []
        }]
    });

    // 异步加载数据
    $.get('http://localhost:8080/strategy/doStrategy').done(function (data) {

        for (var i = 0; i < data.klineVos.length; i++) {
            date[i] = data.klineVos[i].date;
            kline[i] = data.klineVos[i].subDis;
            sumnum = data.klineVos[i].sum;
            if(sumnum>0) {
                sum[i] = sumnum;
            }
            pb[i] = data.klineVos[i].pb;
            hyDisperson[i] = data.klineVos[i].hyDisperson;
        }
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: date
            },
            series: [{
                data: kline
            }]
        });

        // 填入数据
        second.setOption({
            xAxis: {
                data: date
            },
            series: [{
                data: sum
            }]
        });

        // 填入数据
        third.setOption({
            xAxis: {
                data: date
            },
            series: [{
                data: pb
            }]
        });

        // 填入数据
        fourth.setOption({
            xAxis: {
                data: date
            },
            series: [{
                data: hyDisperson
            }]
        });

        window.onresize = function(){
            myChart.resize();
            second.resize();
            third.resize();
            fourth.resize();
        }//组件随着页面的缩放而缩放

    });

    // 或者可以直接传入需要联动的实例数
    echarts.connect([myChart, second, third, fourth]);

</script>
</body>
</html>